/**
 * dialogForm
 */
import { createApp, h } from "vue";
import Dialog from "@/components/DialogForm/index.vue";
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

export type config = {
  title?: string;
  len?: number;
  width?: number;
};

export interface DialogFormOptions {
  drawerVisible?: boolean;
  config: any;
  slots?: Array<any>;
  closeCallback?: () => void;
  successCallback?: () => void;
}

export const dialogForm = (options: DialogFormOptions) => {
  const div = document.createElement("div");
  div.setAttribute("style", "position: fixed; left: 0; top:0; width: 100%;height: 100%;z-index: 2000;");
  const body = document.querySelector("body") as HTMLBodyElement;
  options["drawerVisible"] = options.drawerVisible ?? true;
  const app = createApp({
    render() {
      return h(
        Dialog,
        {
          ...options,
          closeCallback: () => {
            options.closeCallback && options.closeCallback();
            app.unmount(div);
            body.removeChild(div);
          }
        },
        { ...options.slots }
      );
    }
  });
  body.appendChild(div);
  app.config.globalProperties.$dict = window.staticConfig.dictionary;
  app
    .use(ElementPlus, {
      locale: zhCn
    })

    .mount(div);
};
